<template>
    <dl class="row">
        <dt class="column -sm-3">Description lists</dt>
        <dd class="column -sm-9">A description list is perfect for defining terms.</dd>

        <dt class="column -sm-3">Euismod</dt>
        <dd class="column -sm-9">
            <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
            <p>Donec id elit non mi porta gravida at eget metus.</p>
        </dd>

        <dt class="column -sm-3">Malesuada porta</dt>
        <dd class="column -sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

        <dt class="column -sm-3">Fusce dapibus</dt>
        <dd class="column -sm-9">
            Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
            massa justo sit amet risus.
        </dd>

        <dt class="column -sm-3">Nesting</dt>
        <dd class="column -sm-9">
            <dl class="row">
                <dt class="column -sm-4">Nested definition list</dt>
                <dd class="column -sm-8">
                    Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
                </dd>
            </dl>
        </dd>
    </dl>
</template>
